<template>
	<view class="page">
		<view class="p-tab align-center">
			<view class="tab-wrap" :class="{ active: idx === tabCurIdx }" v-for="(item, idx) in tabs" :key="idx" @click="tapTab(idx)">
				<text class="txt">{{ item.name }}</text>
			</view>
		</view>
		<view class="p-tab-placer"></view>
		<view class="p-list">
			<singleList ref="listRef" url="coupon.lists" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{ list }">
					<empty v-if="sRes && sRes==='empty'" marginTop="200rpx"></empty>
					<block v-for="(item, i) in list" :key="i">
						<couponItem :info="item" :status="tabs[tabCurIdx].status" @del="del" />
					 </block>
				</template>
			</singleList>
		</view>
		<safe-area height="84rpx" bgColor="#f7f7f7">
			<template v-slot:btn>
				<view class="p-btn" @click="navTo('/pages/coupon/couponHandle')">
					新建优惠券
				</view>
			</template>
		</safe-area>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref,
	nextTick,
	// watchEffect,
} from 'vue';
import couponItem from './components/couponItem.vue';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
const coupons = defineComponent({
	components: {
		couponItem
	},
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({
			tabCurIdx: 0,
			tabs: [
				{ name: '未开始', status: '1' },
				{ name: '进行中', status: '2' },
				{ name: '已结束', status: '3' },
			],
			reqData: {},
			sRes:'',
		});
		const tapTab = idx => {
			if (idx === data.tabCurIdx) {
				return;
			}
			data.tabCurIdx = idx;
			data.reqData = {
				status: data.tabs[data.tabCurIdx].status
			};
		};
		const listRef = ref();
		onLoad(e => {
			let status = e.status || '1'; //字符串类型
			data.tabCurIdx = data.tabs.findIndex(t => t.status === status);
		});
		onShow(() => {
			nextTick(() => {
				data.reqData = {
					status: data.tabs[data.tabCurIdx].status
				};
				// listRef.value.getList(true);
			});
		});
		onPullDownRefresh(()=>{
			listRef.value.getList(true);
			uni.stopPullDownRefresh();
		})
		onReachBottom(()=>{
			listRef.value.getList();
		})
		
		const del =(info)=>{
			const {id} = info;
			uni.showModal({
				title:'提示',
				content:"确认删除该优惠券吗？",
				success: async (res) => {
					if(res.confirm){
						const sendData = {
							id,
						}
						let res = await uni.$request('coupon.delete',sendData)
						listRef.value.getList(true);
					}
				}
			})
		}
		const searchEnd =({loadingType,pageOneRes})=>{
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				data.sRes='empty';
			}else{
				data.sRes=loadingType;
			}
		}
		return {
			...toRefs(data),
			tapTab,
			listRef,
			searchEnd,
			del,
		};
	}
});
export default coupons;
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.p-tab {
		// padding: 0 30rpx;
		position: fixed;
		/* #ifdef H5 */
		top:calc(var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		
		left: 0;
		z-index: 2;
		width: 100%;
		background-color: #f7f7f7;
		border-bottom: 2rpx solid #eee;
		// box-shadow: 0 1rpx 4rpx rgba(0,0,0,.1);
		.tab-wrap {
			.txt {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333;
				line-height: 80rpx;
			}
			text-align: center;
			width: 33.33%;
			height: 80rpx;
	
			position: relative;
			&.active {
				.txt{
					color: #256ae5;
				}
				&::after {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 14rpx;
					content: '';
					width: 40rpx;
					height: 3rpx;
					background: #256ae5;
					border-radius: 4rpx;
				}
			}
		}
	}
	.p-tab-placer {
		width: 100%;
		height: 90rpx;
	}
	.p-list {
		padding: 0 20rpx;
	}
	.p-btn{
		margin: 56rpx auto 0;
		width: 670rpx;
		height: 84rpx;
		background: #3E6FEF;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		&.disabled{
			background-color: #eee;
		}
	}
</style>